<template>
	<view class="recommend">
		<view>
			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
			 swiperWidth="750"></u-tabs-swiper>
		</view>
		<swiper class="swiper" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in tabs" :key="index">
				<scroll-view scroll-y class="scroll-y-item" @scrolltolower="onreachBottom">
					<DailyList :flowList="item" :ref="index"/>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import DailyList from '@/components/DailyList/DailyList.vue'
	export default {
		components:{
			DailyList
		},
		data() {
			return {
				list: [{
					name: '近7天'
				}, {
					name: '近30天 '
				}, {
					name: '商家发布'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				tabs:
				{
					WeeklyList:[],
					MonthlyList:[],
					shopRecommendList:[]
				},
				pageNum:1,
				pageSize:10
			};
		},
		onLoad()
		{
			this.getWeeklyListData()
			this.getMonthlyListData()
			this.getShoprecommendList()
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) 
			{
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) 
			{
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) 
			{
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() 
			{
				this.pageNum++
				this.getWeeklyListData()
				this.getMonthlyListData()
				this.getShoprecommendList()
			},
			async getWeeklyListData()
			{
				//准备近7天的params
				let params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					day:7
				}
				try{
					//查询数据库
					let res = await this.$u.api.getDayOrder(params)
					let result = res
					result.forEach(item => { //只取查到的图片的第一张
						if(item.dPicture !== null)
							item.dPicture = item.dPicture.split(",")[0]
					})
					//有结果则压放入数组中
					if(res.length > 0)
						this.tabs.WeeklyList.push(...res)
					else
						this.tabs.WeeklyList = res
				}catch(e){}
			},
			async getMonthlyListData()
			{
				let params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					day:30
				}
				try{
					let res = await this.$u.api.getDayOrder(params)
					
					let result = res
					console.log(result);
					result.forEach(item => {
						if(item.dPicture !== null)
							item.dPicture = item.dPicture.split(",")[0]
					})
					if(res.length > 0)
						this.tabs.MonthlyList.push(...res)
					else
						this.tabs.MonthlyList = res
				}catch(e){}
			},
			async getShoprecommendList()
			{
				let params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
				try{
					let res = await this.$u.api.getShopRemmend(params)
					let result = res
					result.forEach(item => {
						if(item.dPicture !== null)
							item.dPicture = item.dPicture.split(",")[0]
					})
					if(res.length > 0)
						this.tabs.shopRecommendList.push(...res)
					else
						this.tabs.shopRecommendList = res
				}catch(e){}
			}
		}
	}
</script>

<style scoped>
	.recommend
	{
		box-sizing: border-box;
	}
	.swiper-item
	{
		height: auto;
		overflow: hidden;
		box-sizing: border-box;
	}
	.swiper
	{
		height: auto;
		position: absolute;
		top: 44px;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.scroll-y-item
	{
		height: 100%;
	}
</style>
